<template>
  <div class="action-btn-wp">
    <el-button type="text" size="small" @click.stop.prevent="showDialog()"><slot>售后详情</slot></el-button>

    <el-dialog
        :visible.sync="dialogVisible"
        size="small"
        :close-on-click-modal="true"
        custom-class="small-body-dialog"
      >
      <span slot="title">
        <i class="fa fa-circle" style="color: orange;padding-right: 4px;font-size: 12px;"></i>
        <span>{{row.processStr}}</span>
      </span>
      <div class="action-service-info">
        <div class="form-item">
          <span class="inline" style="width: 250px;">
            <label>用户:</label>
            <span>{{row.userName}}</span>
          </span>
          <span class="inline">
            <label>商品:</label>
            <span>{{row.goodsName}}</span>
          </span>
        </div>
        <div class="form-item">
          <label>{{type}}原因:</label>
          <span>{{row.reason}}</span>
        </div>
        <div class="form-item">
          <textarea disabled="disabled">{{row.explanation}}</textarea>
        </div>
        <div class="form-item">
          <label>图片凭证:</label>
          <div class="img-list">
            <div class="img-wp" v-for="(item,index) in row.imgJsonArray">
              <img :src="getImg(item.url)" @click.stop.prevent="$refs['preview'].previewImg(index)" />
            </div>
          </div>
          <!--图片预览-->
          <preview-img ref="preview" :list="row.imgJsonArray"></preview-img>
        </div>
        <div v-if="row.insurance" class="form-item">
          <label>用户已购买保险:</label>
          <span>{{getInsurance}}</span>
        </div>
        <div class="form-item">
          <label>用户{{type}}地址:</label>
          <div>
            <div>
              <span>{{userAddress.contactName || '等待用户设置收货人'}}</span>
              <span> / {{userAddress.contactNumber || '等待用户设置手机号'}}</span>
            </div>
            <div>
              {{userAddress.address || '等待用户设置收货地址'}}
            </div>
          </div>
        </div>
        <div class="form-item">
          <label>商家{{type}}地址:</label>
          <div>
            <div>
              <span>{{merchantAddress.contactName || '等待商家设置收货人'}}</span>
              <span> / {{merchantAddress.contactNumber || '等待商家设置手机号'}}</span>
            </div>
            <div>
              {{merchantAddress.address || '等待商家设置收货地址'}}
            </div>
          </div>
        </div>
        <div class="form-item">
          <label>{{type}}进程:</label>
          <ul class="process-list">
            <li v-for="(item,index) in row.processProgressArray" :key="index" :class="{'new':index==0}">
              <div>{{item.process}}</div>
              <div>{{item.applyTime}}</div>
            </li>
          </ul>
        </div>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import previewImg from '@/components/previewImg';
  import {osshost} from '@/api/util/fetch';

  export default {
    name: 'actionServiceInfo',
    components:{
      'preview-img':previewImg,
    },
    props:{
      scope:{
        type:Object,
        default:()=>{},
      },
      scopeId:{
        type:String,
        default:'id'
      },
      type:{
        type:String,
        default:'',
      }
    },
    data()
    {
      return {
        dialogVisible:false,
      }
    },
    computed:{
      row()
      {
        return this.scope.row || {};
      },
      userAddress()
      {
        return this.scope.row.userAddress || {};
      },
      merchantAddress()
      {
        return this.scope.row.merchantAddress || {};
      },
      getInsurance()
      {
        let insurance = this.scope.row.insurance || [];
        if(insurance && insurance.length)
        {
          let s = [];
          insurance.forEach(item=>{
            s.push(item.insuranceName || '');
          });

          return s.join(';');
        }
        else
        {
          return ' 无 ';
        }
      },
    },
    methods: {
      showDialog()
      {
        this.dialogVisible = true;
      },
      getImg(url)
      {
        if(url && url !=='undefined')
        {
          if(url.indexOf('https://')===0 || url.indexOf('http://')===0)
          {
            return url + '?x-oss-process=image/resize,w_100';
          }
          else
          {
            return osshost + url + '?x-oss-process=image/resize,w_100';
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .action-service-info
  {
    .form-item
    {
      margin-bottom: 15px;
      overflow: hidden;

      .inline
      {
        float: left;
        vertical-align: top;
      }

      label
      {

      }

      textarea
      {
        display: block;
        width: 100%;
        height: 100px;
        overflow: auto;
        resize: none;
        border: 1px solid #99A9BF;
        padding: 10px;

        &:disabled
        {
          background: #fff;
        }
      }
    }
    .process-list
    {
      max-height: 400px;
      overflow: auto;
      list-style: none;
      padding: 0 0 10px 0;
      margin: 0;

      li
      {
        position: relative;
        padding: 10px 10px 5px 30px;
        margin-right: 20px;
        font-size: 12px;
        line-height: 1.6;

        + li
        {
          //border-top: 1px solid #eee;
          &:before
          {
            top:0;
          }

        }

        .tag
        {
          display: none;
          position: absolute;
          left: 20px;
          top: 50%;
          padding: 2px;
          margin-top: -9px;
          color: #fff;
          background: red;
        }

        &:before
        {
          position: absolute;
          content: "";
          left: 10px;
          top: 16px;
          bottom: 0;
          border-left: 1px solid #eee;
          z-index: 0;
        }
        &:after
        {
          content: "";
          position: absolute;
          left: 6px;
          top: 18px;
          margin-top: -5px;
          width: 10px;
          height: 10px;
          background: #20a0ff;
          border: 2px solid #fff;
          z-index: 1;
          border-radius: 50%;
          box-sizing: border-box;
        }

        &.new
        {
          color: red;
          &:after
          {
            background: red;
          }

          .tag
          {
            display: block;
          }
        }
      }
    }

    .img-list
    {
      overflow: hidden;

      .img-wp
      {
        float: left;
        width: 100px;
        height: 100px;
        overflow: hidden;
        position: relative;
        border: 1px solid #d1dbe5;

        img
        {
          width: 100%;
          height: 100%;
          display: block;
        }

        + .img-wp
        {
          margin-left: 15px;
        }
      }
    }
  }
</style>